import { withRouter } from 'next/router';
import Link from 'next/link';
import { Layout, Menu, Icon } from 'antd';
const { Sider, Content } = Layout;

function UserLayout(props) {
  return (
    <>
      <style jsx>
        {`a{display:inline-block!important;}`}
      </style>
      <Layout>
        <Sider>
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={[props.router.pathname]}
            selectedKeys={[props.router.pathname]}
          >
            <Menu.Item key="/user/list">
              <Icon type="user" /><Link href="/user/list"><a>用户列表</a></Link>
            </Menu.Item>
            <Menu.Item key="/user/add">
              <Icon type="plus" /><Link href="/user/add"><a>添加用户</a></Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Content style={{ padding: 8 }}>
          {/* add、list组件都会作为children */}
          {/* 因为我们会用index这个组件(本组件)作为高阶组件 套住add、list 参看add、list里 我们使用的UserLayout即是本组件 */}
          {props.children}
        </Content>
      </Layout>
    </>
  )
}
export default withRouter(UserLayout);
